<template>
  <div class="flex-demo">
    <h2>Flex-grow 示例</h2>
    <div class="demo-section">
      <div class="flex-container">
        <div class="flex-item" style="flex-grow: 1">flex-grow: 1</div>
        <div class="flex-item" style="flex-grow: 2">flex-grow: 2</div>
        <div class="flex-item" style="flex-grow: 1">flex-grow: 1</div>
      </div>
      <p class="description">flex-grow 属性定义项目的放大比例。默认为0，即如果存在剩余空间，也不放大。</p>
    </div>

    <h2>Flex-shrink 示例</h2>
    <div class="demo-section">
      <div class="flex-container shrink-container">
        <div class="flex-item" style="flex-shrink: 1">flex-shrink: 1</div>
        <div class="flex-item" style="flex-shrink: 2">flex-shrink: 2</div>
        <div class="flex-item" style="flex-shrink: 1">flex-shrink: 1</div>
      </div>
      <p class="description">flex-shrink 属性定义了项目的缩小比例。默认为1，即如果空间不足，该项目将缩小。</p>
    </div>

    <h2>综合示例</h2>
    <div class="demo-section">
      <div class="flex-container combined-container">
        <div class="flex-item" style="flex: 1 1 100px">flex: 1 1 100px</div>
        <div class="flex-item" style="flex: 2 2 100px">flex: 2 2 100px</div>
        <div class="flex-item" style="flex: 1 1 100px">flex: 1 1 100px</div>
      </div>
      <p class="description">flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。上面的示例展示了不同的增长和收缩比例。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
// 组件逻辑
</script>

<style scoped>
.flex-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 40px;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
}

.flex-container {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.flex-item {
  padding: 20px;
  background-color: #e1e1e1;
  border-radius: 4px;
  text-align: center;
  min-width: 100px;
}

.shrink-container {
  min-width: 800px;
}

.description {
  color: #666;
  font-size: 14px;
  margin-top: 10px;
}

.combined-container {
  min-width: 600px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>